<template>
    <div class="login">
        <!-- 自定义公用头部组件，title根据type 类型传入登录表单或注册表单，单击“回退”按钮，回调页面 -->
        <custom-header :title="type == 'login' ? '登录' : '注册'" :back="'/home'" />
      <!-- logo图片 -->
      <img class="logo" src="https://s.yezgea02.com/1604045825972/newbee-mall-vue3-app-logo.png" alt="">
      <!-- 当type为login时，显示登录菜单 -->
      <div v-if="type == 'login'" class="login-body login">
        <!-- 表单提交事件 -->
        <van-form @submit="onSubmit">
            <!-- 表单输入框 -->
          <van-field
            v-model="username"
            name="username"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <!-- 密码输入框 -->
          <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <!-- 新增的验证码输入表单 -->
          <van-field
           center
           clearable
           label="验证码"
           placeholder="输入验证码"
           v-model="verify"
          >
            <template #button>
                <vue-img-verify ref="verifyRef"/>
            </template>
          </van-field>
          
          <div style="margin: 16px;">
            <!-- 切换为注册表单 -->
            <div class="link-register" @click="toggle('register')">立即注册</div>
            <!-- 触发表单事件 -->
            <van-button round block color="#1baeae" native-type="submit">登录</van-button>
          </div>
        </van-form>
      </div>
      <!-- 当type为register时，显示注册表单 -->
      <div v-else class="login-body register">
        <!-- 表单提交事件 -->
        <van-form @submit="onSubmit">
            <!-- 用户名 -->
          <van-field
            v-model="username1"
            name="username1"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          />
          <!-- 密码 -->
          <van-field
            v-model="password1"
            type="password"
            name="password1"
            label="密码"
            placeholder="密码"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <!-- 新增的验证码输入表单 -->
          <van-field
           center
           clearable
           label="验证码"
           placeholder="输入验证码"
           v-model="verify"
          >
            <template #button>
                <vue-img-verify ref="verifyRef"/>
            </template>
          </van-field>
          
          <div style="margin: 16px;">
            <!-- 切换为登录表单 -->
            <div class="link-login" @click="toggle('login')">已有登录账号</div>
            <!-- 触发表单事件 -->
            <van-button round block color="#1baeae" native-type="submit">注册</van-button>
          </div>
        </van-form>
      </div>
    </div>
  </template>
  
  <script>
  import { ref, reactive, toRefs, onMounted } from 'vue'
  import CustomHeader from 'components/CustomHeader.vue';
  import { login, register } from 'service/user'
  import { setLocal } from 'utils/help.js'
  import { Toast } from 'vant'
  import VueImgVerify from 'components/VueImageVerify.vue'
  import md5 from 'js-md5'
  export default {
    name: 'Login',
    components: {
        CustomHeader, //注册组件
        VueImgVerify
    },
    setup() {
      const verifyRef = ref(null)
      const state = reactive({
        username: '',   // 登录用户名
        password: '',   // 登录密码
        username1: '',  // 注册用户名
        password1: '',  // 注册密码
        type: 'login',  // 登录或注册状态：login为登录，register为注册
        verify: '',     // 用户输入的验证码
        imgCode: ''     // 验证码组件生成的验证码
      })
      // 切换登录和注册两种模式
      const toggle = (v) => {
        state.type = v
      }
      onMounted(()=>{
        console.log('verifyRef.value', verifyRef.value)
      })

      // 提交登录或注册表单
      const onSubmit = async (values) => {
        state.imgCode = verifyRef.value.imgCode || ''
        if(state.verify.toLocaleLowerCase() != state.imgCode.toLocaleLowerCase()){
            Toast.fail('验证码有误')
            return
        }

        if (state.type == 'login') {
          // 调用登录接口
          const { data } = await login({
            "loginName": values.username,
            "passwordMd5": md5(values.password)
          })
          setLocal('token', data)
          // 需要刷新页面，否则 axios.js 文件里的 token 不会被重置
          window.location.href = '/'
        } else {
          await register({
            "loginName": values.username1,
            "password": values.password1
          })
          Toast.success('注册成功')
          state.type = 'login'
        }
      }
      return {
        ...toRefs(state),
        toggle,
        onSubmit,
        verifyRef //返回verifyRef以供模板使用
      }
    }
  }
  </script>
  
  <style lang="less">
    .login {
      .logo {
        width: 120px;
        height: 120px;
        display: block;
        margin: 80px auto 20px;
      }
      .login-body {
        padding: 0 20px;
      }
      .login {
        .link-register {
          font-size: 14px;
          margin-bottom: 20px;
          color: #1989fa;
          display: inline-block;
        }
      }
      .register {
        .link-login {
          font-size: 14px;
          margin-bottom: 20px;
          color: #1989fa;
          display: inline-block;
        }
      }
    }
  </style>